import { getCartList, changeCount, delSelect } from '@/api/cart'
import { Toast } from 'vant'

export default {
  namespaced: true, // 开启命名空间，使当前模块成为一个独立的作用域。
  // 1. state  定义模块内的状态数据（类似组件的 data）
  state () {
    return {
      cartList: []
    }
  },
  // 2. mutations 定义修改状态的方法（唯一能修改 state 的地方）
  mutations: {
    // 提供一个设置cartlist的mutations
    setCartList (state, newList) {
      state.cartList = newList
    },
    toggleCheck (state, goodsId) {
    // 让对应的id的项的状态取反
      const goods = state.cartList.find(item => item.goods_id === goodsId)
      goods.isChecked = !goods.isChecked
    },
    toggleAllCheck (state, flag) {
    //   让所有的小选框，同步设置
      state.cartList.forEach(item => {
        item.isChecked = flag
      })
    },
    changeCount (state, { goodsId, goodsNum }) {
      const goods = state.cartList.find(item => item.goods_id === goodsId)
      goods.goods_num = goodsNum
    }
  },
  // 3. actions  定义处理异步操作的方法（如接口请求），最终通过 mutations 修改状态
  actions: {
    async getCartAction (context) {
      const { data } = await getCartList()
      //  后台返回的数据中，不包含复选框的选中状态，为了实现将来的功能
      // 需要手动维护数据，给每一项，添加一个ischecked状态（标记当前商品是否被选中）
      data.list.forEach(item => {
        item.isChecked = true
      })
      context.commit('setCartList', data.list)
    },
    async changeCountAction (context, obj) {
      const { goodsNum, goodsId, goodsSkuId } = obj

      // 先本地修改
      context.commit('changeCount', { goodsId, goodsNum })
      // 再同步到后台
      await changeCount(goodsId, goodsNum, goodsSkuId)
    },

    // 删除我们的购物车数据
    async delSelect (context) {
      const selCartList = context.getters.selCartList
      // map 是 JavaScript 数组的一个高阶函数，用于遍历数组的每一项，返回一个新数组。
      const cartIds = selCartList.map(item => item.id)
      // console.log(cartIds)
      await delSelect(cartIds)
      Toast('删除成功')

      //  重新拉取最新的购物车数据（重新渲染）
      // dispatch 调用action里面的函数
      context.dispatch('getCartAction')
    }
  },
  // 4.getters  定义从状态中派生出的计算属性（类似组件的 computed）。
  getters: {
    // 计算购物车里面所有商品的总数
    cartTotal (state) {
      return state.cartList.reduce((sum, item) => sum + item.goods_num, 0)
    },
    // 选中的商品项
    selCartList (state) {
      return state.cartList.filter(item => item.isChecked)
    },

    // 选中的总数
    selCount (state, getters) {
      return getters.selCartList.reduce((sum, item) => sum + item.goods_num, 0)
    },

    // 选中的总价
    selPrice (state, getters) {
      return getters.selCartList.reduce((sum, item) => {
        return sum + item.goods_num * item.goods.goods_price_min
      }, 0).toFixed(2)
    },
    // 是否全选
    isAllChecked (state) {
      return state.cartList.every(item => item.isChecked)
    }
  }
}
